<template>
	<view>
		<uni-popup ref="payPopup" type="bottom" :hideBar="hideBar" v-show="visible" @change="visibleChange">
			<view class="pay-popup">
				<image :src="topLeftIcon" mode="aspectFill" class="top-left-icon"></image>
				<text class="iconfont icon-close1 gotwill-icon-close" @click="cancel('payPopup')"></text>
				<view class="paypopup-header">
					<user-avatar class="paypopup-headerImg" :src="wish.avatar_url" />
				</view>
				<rich-text class="paypopup-title" :nodes="wishTip"></rich-text>
				<!-- <view class="paypopup-title">wishTip<text class="paypopup-title-light">三倍心愿值</text></view> -->
				<view  class="paypopup-exchange">
					<exchange-list :title="midTitle" :list="exchangeList"></exchange-list>
				</view>
				<view class="paypopup-footer">
					<view class="paypopup-footer-desc">
						<view class="selected-value">支持<text class="selected-summery">¥{{costNum}}</text></view>
						<text class="selected-desc">{{bottomText}}</text>
					</view>
					<text class="sure-support" @click="confirm">确认支持</text>
				</view>
			</view>
		</uni-popup>
		<support-success :visible.sync="successPopupVisible" :isTopOffset="isTopOffset" :getNum="getCoinNum" :groupId="wish.group_id" :showMore="showMore"></support-success>
	</view>
</template>

<script>
	import SupportSuccess from '@/components/support-success-popup.vue'
	import UserAvatar from '@/components/user/avatar.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import exchangeList from '@/components/pay-popup/exchange-list.vue'
	export default {
		name:'pay-popup',
		components:{
			UserAvatar,
			uniPopup,
			exchangeList,
			SupportSuccess
		},
		props:{
			wish:{
				type:Object,
				default(){
					return {}
				}
			},
			visible:{
				type: Boolean,
				default:false
			},
			hideBar:{
				type: Boolean,
				default:false
			},
			isTopOffset:{
				type: Boolean,
				default:true
			},
			showMore:{
				type: Boolean,
				default:true
			}
		},
		data() {
			return {
				info:{},
				getCoinNum:0,
				costNum:0,
				bottomText:'',
				wishTip:'',
				exchangeList:[],
				successPopupVisible:false,
				midTitle:'',
				topLeftIcon:''
			};
		},
		watch:{
			'visible':function(val){
				if(val){
					this.getInfo().then(()=>{
						this.$refs['payPopup'].open()
					}).catch((res)=>{
						console.log(res)
						this.$emit('update:visible', false)
					})
					
				} else {
					this.$refs['payPopup'].close()
				}
			}
		},
		methods:{
			cancel(){
				this.$emit('update:visible', false)
				this.$refs['payPopup'].close()
				setTimeout(()=>{
					uni.showTabBar()
				},300)
			},
			visibleChange({show}){
				this.$emit('update:visible', show)
			},
			async confirm(){
				await this.$store.dispatch('supportWish',this.wish.group_id)
				this.$emit('update:visible', false)
				this.successPopupVisible=true
				this.$emit('success')
			},
			async getInfo(){
				let data =await this.$api.getBeforeSupportInfo({group_id:this.wish.group_id})
				let info=data.support_wish_reward_info
				this.midTitle=data.wish_coin_effect
				this.bottomText=data.wish_coin_num_text
				this.wishTip=info.wish_coin_text
				this.getCoinNum=info.wish_coin_num
				this.costNum=data.need_pay_money
				this.exchangeList=info.goods_list
				this.topLeftIcon=info.top_left_icon
				return data
			}
		}
	}
</script>

<style lang="scss" scoped>
.pay-popup{
	position: relative;
	padding:0rpx 0 var(--safe-area-inset-bottom);
	border-top-left-radius: 10rpx;
	border-top-right-radius: 10rpx;
	background-color: #fff;
	.top-left-icon{
		position: absolute;
		top:20rpx;
		left: 20rpx;
		width: 120rpx;
		height: 120rpx;
		z-index: 2;
	}
	.paypopup-title{
		padding: 0rpx 36rpx;
		margin-bottom:60rpx;
		font-size:32rpx;
		font-weight: 600;
		color:#000;
		text-align: center;
	}
	
	.paypopup-title-light{
		color:#E7404A;
	}
	.gotwill-icon-close{
		position: absolute;
		font-size: 50rpx;
		color:#B1B1B1;
		top:20rpx;
		right:20rpx;
		z-index: 2;
	}
	.paypopup-header{
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0rpx;
		height:161rpx;
		text-align: center;
	}
	.paypopup-headerIcon{
		position: absolute;
		top:7rpx;
		left:6rpx;
		z-index: 1;
		width:154rpx;
		height:154rpx;
	}
	.paypopup-exchange {
		padding: 0 65rpx;
	}
	.paypopup-cont-titlebg{
		position: absolute;
		top:14rpx;
		left:0rpx;
		z-index: 0;
		width:100%;
		height:0rpx;
		border-bottom:1rpx solid #d8d8d8;
	}
	.paypopup-cont-title{
		position: relative;
		margin-bottom:20rpx;
		width:100%;
	}
	.paypopup-title-text{
		position: relative;
		z-index: 1;
		margin:0rpx auto;
		display: block;
		padding:0rpx 20rpx;
		width:232rpx;
		height:30rpx;
		line-height: 30rpx;
		background-color: #fff;
		font-size: 24rpx;
		color:#999;
		&::before{
			position: absolute;
			content:'';
			left:-8rpx;
			top:10rpx;
			width:11rpx;
			height:11rpx;
			background-color: #d8d8d8;
			transform: rotate(45deg);
		}
		&::after{
			position: absolute;
			content:'';
			right:-8rpx;
			top:10rpx;
			width:11rpx;
			height:11rpx;
			background-color: #d8d8d8;
			transform: rotate(45deg);
		}
	}
	.options-list{
		display: flex;
		margin-bottom:60rpx;
	}
	.options-li{
		margin-right:40rpx;
		&:last-child{
			margin-right:0rpx;
		}
		image{
			// margin-bottom:10rpx;
			display: block;
			max-width:180rpx;
			max-height:180rpx;
			border:1rpx solid #e1e1e1;
			border-radius: 4rpx;
		}
	}
	.options-li-price{
		margin-bottom:6rpx;
		font-size:20rpx;
		color:#666;
	}
	.will-value-box{
	}
	.icon-heart{
		font-size: 28rpx;
	}
	.will-value{
		font-size: 24rpx;
		color:#E7404A;
		font-weight: bold;
	}
	.paypopup-footer{
		display: flex;
		width:100%;
		height:98rpx;
		background-color: #fff;
	}
	.paypopup-footer-desc{
		display: flex;
		padding-left:36rpx;
		justify-content: center;
		flex-direction: column;
		flex:1;
		border-top:1rpx solid #E2E2E2;
	}
	.selected-value{
		display: flex;
		align-items: center;
		font-size:26rpx;
		color:#000;
	}
	.selected-summery{
		font-size: 32rpx;
		font-weight: 600;
		color:#E7404A;
	}
	.selected-desc{
		font-size:22rpx;
		font-weight: 400;
		color:#E7404A;
	}
	.sure-support{
		padding: 0rpx 78rpx;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		background-color: #E7404A;
		font-size:36rpx;
		color:#fff;
	}
}
</style>
